<template>
  <div class="news_container">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="left_item">
          <div class="news_title">
            {{newsName}}
          </div>

          <div class="img_item">

            <div class="block swiperContent" v-for="(item,index) in list.slice(0, 3)" :key="index" @click="details(item)">
              <el-image :src="item.fakuImg"></el-image>
              <p class="text-1">{{item.title}}</p>
            </div>
          </div>

        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="news-right">
        <div class="right_item " style="overflow:auto">
          <div class="info_item clearfix" v-for="(item,index) in list.slice(3,list.length)" :key="index" @click="details(item)">
            <div>
              <div class="date">
                <h2>
                  {{item.createTime.substring(8,10)}}
                </h2>
                <p> {{item.createTime.substring(0,7)}}</p>
              </div>
            </div>
            <div>
              <div class="info">
                <h5>{{item.title}}</h5>
                <span>{{item.createTime}}</span>
                <p class="text-2">{{item.profiles}}</p>
              </div>
            </div>
          </div>

          <div class="pagination" v-if="total>0">
            <el-pagination :page-size="1" :hide-on-single-page="true" background layout="prev, pager, next" :total="total" @prev-click="current_change" @next-click="current_change" @current-change="current_change">
            </el-pagination>
          </div>

        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import path from '@/network'
export default {
  name: 'App',
  data () {
    return {
      title: '民生动态',
      imgList: [
        {
          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }, {
          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }, {
          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        },
      ],
      total: 0,
      pagesize: 7,
      currentPage: 1,
      id: this.$route.query.firstId,
      list: [],
      newsName: '',
      activeId: ''
    };

  },

  mounted () {
    //this.getLiveList(this.$route.query.firstId,)
    this.getSecondType(this.$route.query.firstId)
  },
  methods: {
    details: function (item) {
      this.$router.push({ name: 'newsDetails', query: { secondId: item.id, firstId: this.$route.query.firstId, type: 1, title: this.$route.query.title } })
    },



    //获取list
    getSecondType (id) {
      path.getSecondType(
        id
      ).then(res => {
        if (res.success === 0) {
          this.newsName = res.rows[0].name;
          this.activeId = res.rows[0].id;
          this.getLiveList(this.activeId)
        }
      })
    },


    //获取list
    getLiveList (id) {
      path.getLiveList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          this.list = res.rows
          this.total = (res.total / this.pagesize);
          console.log(this.total)
        }

      })
    },


    current_change: function (currentPage) {
      this.currentPage = currentPage;
      this.getLiveList(this.activeId)
    },
  }
}
</script>